import {
  FC,
  useRef,
  RefObject,
  useEffect,
  useState,
  CSSProperties,
} from 'react';

import * as echarts from 'echarts/core';
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from 'echarts/components';
import { BarChart, LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
]);
interface mixDataType {
  type: string;
  name: string;
  data: number[];
}
const buildOptions = (
  dataSource: mixDataType[],
  leftUnit: {
    text: string;
    suffix: string;
  },
  rightUnit: {
    text: string;
    suffix: string;
  },
  category: string[],
  colors: string[] | echarts.graphic.LinearGradient[],
  title?: string,
) => {
  return {
    title: {
      show: title ? true : false,
      text: title,
      bottom: 0,
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal',
      },
    },
    legend: {
      show: true,
      textStyle: {
        color: '#A3D5FF',
      },
    },
    grid: {
      top: 70,
      left: 20,
      right: 20,
      bottom: 10,
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          color: '#000',
        },
        crossStyle: {
          color: '#999',
        },
      },
      textStyle: {
        color: '#000',
      },
    },
    xAxis: [
      {
        type: 'category',
        data: category,
        axisPointer: {
          type: 'line',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#93FDFF',
          },
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#fff',
        },
        axisTick: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: leftUnit.text,
        interval: 50,
        axisLabel: {
          formatter: `{value}${leftUnit.suffix}`,
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#06FEF7',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: rightUnit.text,
        interval: 5,
        axisLabel: {
          formatter: `{value}${rightUnit.suffix}`,
          color: '#fff',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#06FEF7',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: buildSeries(dataSource, colors),
  };
};
const buildSeries = (
  data: mixDataType[],
  colors: string[] | echarts.graphic.LinearGradient[],
) => {
  return data.map((item: mixDataType, index: number) => ({
    name: item.name,
    type: item.type,
    data: item.data,
    yAxisIndex: item.type === 'bar' ? 0 : 1,
    itemStyle: {
      color: colors[index],
    },
  }));
};
interface Iprops {
  width?: number | string;
  height?: number | string;
  dataSource: mixDataType[];
  category: string[];
  leftUnit?: {
    text: string;
    suffix: string;
  };
  rightUnit?: {
    text: string;
    suffix: string;
  };
  colors?: string[] | echarts.graphic.LinearGradient[];
  title?: string;
  style?: CSSProperties;
}

/**
 * @description 折柱混合图
 * @param props
 * @param {number | string} props.width 宽
 * @param {number | string} props.height 高
 * @param {Object} props.dataSource 数据源
 * @param {Array} props.category x轴坐标
 * @param {Object} props.leftUnit 左侧y轴单位
 * @param {Object} props.rightUnit 右侧y轴单位
 * @param {Object} props.lineColor 颜色
 * @param {String} props.title 图表标题
 * @param {CSSProperties} props.style 图标样式
 */

const MIxBarLine: FC<Iprops> = (props) => {
  const {
    width = 625,
    height = 230,
    dataSource,
    leftUnit = {
      text: '亿元',
      suffix: '',
    },
    rightUnit = {
      text: '同比变化',
      suffix: '%',
    },
    category,
    colors = [],
    title,
    style,
  } = props;

  const [chart, setChart] = useState<echarts.ECharts>();
  const chartRef = useRef() as RefObject<HTMLDivElement>;

  useEffect(() => {
    const chartDom = chartRef.current as HTMLElement;
    const currentChart = echarts.init(chartDom);
    setChart(currentChart);
  }, []);

  useEffect(() => {
    chart &&
      chart.setOption(
        buildOptions(dataSource, leftUnit, rightUnit, category, colors, title),
      );
  }, [
    chart,
    dataSource,
    leftUnit,
    rightUnit,
    category,
    leftUnit,
    rightUnit,
    colors,
  ]);

  return (
    <div
      ref={chartRef}
      style={{
        ...style,
        width,
        height,
      }}
    ></div>
  );
};

export default MIxBarLine;
